<template>
    <div class="agency-detail">
        <a-modal width="1300px" :visible="visible" title="优惠券详情" @cancel="closeModal" class="yuan-modal agency-detail-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '150px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col5">
                        <div class="form-panel-box" v-if="formData.status===1">
                            <div class="form-title">确认进度</div>
                            <a-table bordered :rowKey="(item,i)=>item.storeId" :columns="columns"
                                :data-source="formData.couponStores" :pagination="false">
                                <template slot='action' slot-scope="text, record, index">
                                    <div>
                                        <a-button type="danger" @click="clickDelete(record,index)">删除</a-button>
                                    </div>
                                </template>
                                <template slot='getRow' slot-scope="text, record, index">
                                    <div>
                                        <span>{{record.usageLimit}}</span>
                                    </div>
                                </template>
                            </a-table>
                        </div>
                        <div class="form-panel-box">
                            <div class="form-title">基本信息</div>

                            <a-form-model-item class="yuan-form-item" label="活动类型">
                                <span class="yuan-form-input">满减券</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="优惠券类型">
                                <span class="yuan-form-input">商城券</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="优惠券名称">
                                <span> {{formData.name}}</span>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-item" label="领取活动时间">
                                <span>{{formData.startTime}}至{{formData.endTime}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="最低消费">
                                <span>{{$toYuan(formData.minAmount)}}元，优惠：{{$toYuan(formData.discountAmount)}}元</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="券使用有效期">
                                <span v-if="formData.validityType===1">
                                    <span>固定时间,</span>
                                    <span>{{formData.validityStartTime}}至{{formData.validityEndTime}}</span>
                                </span>
                                <span v-else>
                                    <span>{{formData.validityDays}}天</span>
                                </span>
                            </a-form-model-item>

                        </div>
                        <div class="form-panel-box">
                            <div class="form-title">发放规则</div>

                            <a-form-model-item class="yuan-form-row" label="券使用有效期">
                                <span v-if="formData.issueType===1">
                                    <span>客户主动领取 </span>
                                    <span class="yuan-form-unit">发放总数量：</span>
                                    <span>{{formData.issueQuantity}}</span>
                                    <span class="yuan-form-unit" style="margin-left:120px">每人限领</span>
                                    <span>{{formData.limitPerPerson }}</span>
                                    <span class="yuan-form-unit">张</span>
                                </span>
                                <span v-else> 系统自动发放</span>

                            </a-form-model-item>
                            <!-- <a-form-model-item class="yuan-form-row" label="仅限新用户">
                                <a-radio-group v-model="formData.userType" :class="(isShow||isPreview)?'disable-form':''">
                                    <a-radio :value="1">是</a-radio>
                                    <a-radio :value="0">否</a-radio>
                                </a-radio-group>
                            </a-form-model-item> -->

                        </div>
                        <div class="form-panel-box">
                            <div class="form-title">适用范围</div>
                            <a-form-model-item class="yuan-form-row" label="适用商品" prop="phone">
                                <a-radio-group v-model="formData.goodsLimitType" :class="(isShow||isPreview)?'disable-form':''">
                                    <a-radio :value="1">全部商品</a-radio>
                                    <a-radio :value="2">指定分类</a-radio>
                                    <a-radio :value="3">指定商品</a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <ClassListVue ref="ClassListVue" v-show="formData.goodsLimitType===2"
                                :defaltData="formData.applicableCategories" :isShow="true"/>
                            <GoodsListVue ref="GoodsListVue" v-show="formData.goodsLimitType===3"
                                :defaltData="formData.applicableGoods" :isShow="true"/>


                            <a-form-model-item class="yuan-form-row" label="适用门店">
                                <a-radio-group v-model="formData.storeLimitType" :class="(isShow||isPreview)?'disable-form':''">
                                    <a-radio :value="1">全部机构</a-radio>
                                    <a-radio :value="2">指定机构</a-radio>
                                </a-radio-group>
                            </a-form-model-item>

                            <AgencyListVue ref="AgencyListVue" v-show="formData.storeLimitType===2"
                                :defaltData="formData.couponStores" :isShow="true"/>
                        </div>
                        <div class="form-panel-box">
                            <div class="form-title">使用规则</div>
                            <a-form-model-item class="yuan-form-row" label="互斥条件">
                                <a-radio-group v-model="formData.ifElseCouponShare" :class="(isShow||isPreview)?'disable-form':''">
                                    <a-radio :value="0">不与其他优惠共享</a-radio>
                                    <a-radio :value="1">其他优惠共享</a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="可用时段">
                                <span v-for="item in formData.availableDaysJson">{{item}}、</span>
                            </a-form-model-item>

                        </div>
                        <div class="form-panel-box" :class="(isShow||isPreview)?'disable-form':''">
                            <div class="form-title">其他</div>
                            <a-form-model-item class="yuan-form-row" label="加盟机构营销比例">
                                <a-input class="yuan-form-input" placeholder="请输入比例"
                                    v-model="formData.storeCommissionRate"></a-input>
                                <span class="yuan-form-unit">%</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="允许积分兑换" prop="allowSharing">
                                <a-radio-group v-model="formData.allowSharing">
                                    <a-radio :value="1">是</a-radio>
                                    <a-radio :value="0">否</a-radio>
                                </a-radio-group>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-row" label="积分数量" prop="pointsRequired"
                                v-if="formData.allowSharing===1">
                                <a-input class="yuan-form-input" placeholder="请输入兑换所需积分"
                                    v-model="formData.pointsRequired"></a-input>
                            </a-form-model-item>

                            <a-form-model-item class="yuan-form-row" label="使用说明" prop="usageDescription">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.usageDescription" placeholder="用户领取时可看" :maxLength="500" />
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-row" label="备注" prop="remarks">
                                <a-input type="textarea" style="width: 500px;background-color:#F7F7F7" :rows="5"
                                    v-model="formData.remarks" placeholder="优惠券备注，不对用户展示" :maxLength="500" />
                            </a-form-model-item>

                        </div>

                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isAudit">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                    <a-button @click="clickPass" type="success" :loading="saveLoading">
                        通过
                    </a-button>
                    <a-button @click="clickRefuse" type="danger" :loading="saveLoading">
                        拒绝
                    </a-button>
                </template>
                <template v-else-if="isShow">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOk" type="primary" :loading="saveLoading">
                        确认保存
                    </a-button>
                    <a-button @click="closeModal">
                        取消
                    </a-button>
                </template>

            </template>
        </a-modal>
        <ShowInfoModalVue :visible="infoVisible" :info="showInfoCause" title="拒绝原因" @cancel="()=>infoVisible=false" />

        <a-modal width="600px" title="拒绝原因" :visible="refuseVisible" @ok="refuseOk" @cancel="()=>refuseVisible=false" okText="确定"
            cancelText="取消">
            <a-spin tip="Loading..." :spinning="refuseLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">

                        <a-form-model-item label="拒绝原因">
                            <a-input v-model="rejectCause" type="textarea" style="width: 500px;" :rows="5" placeholder="请输入拒绝原因"
                                :maxLength="500" />
                        </a-form-model-item>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import api from "@/api/api";
import AgencyListVue from "./generalDetailAgencyList.vue";
import ClassListVue from "./generalDetailClassList.vue";
import GoodsListVue from "./generalDetailGoodsList.vue";
import marketApi from "@/api/marketApi";
import ShowInfoModalVue from "@/components/showInfoModal.vue";
import { h } from "vue";
@Component({
    name: "tpl",
    components: { AgencyListVue,ClassListVue,GoodsListVue,ShowInfoModalVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: false }) isPreview!: boolean;
    @Prop({ default: false }) isAudit!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editInfo.name) {
                this.formData = { ...this.editInfo };
            } else {
                this.formData = {};
            }
        } else {
        }
    }

    saveLoading = false;
    formData: any = {};
    rules = {
        pageTable: [{ required: true, message: "请输入banner标题", trigger: "change" }],
        pictures: [{ required: true, message: "请上传banner图片", trigger: "change" }],
    };
    async mounted() {}
    columns = [
        {
            align: "center",
            dataIndex: "storeName",
            key: "storeName",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "storeType",
            key: "storeType",
            title: "自营/加盟",
            customRender: (text: string, record: any, index: number) => {
                return record.storeType === "ZY" ? "自营" : "加盟";
            },
        },
        {
            align: "center",
            dataIndex: "name2",
            key: "name2",
            title: "限制领取数量",
            width: 200,
            scopedSlots: { customRender: "getRow" },
        },
        {
            align: "center",
            dataIndex: "participationStatus",
            key: "participationStatus",
            title: "参与状态",
            customRender: (text: string, record: any, index: number) => {
                if (record.participationStatus === 1) {
                    return h("span", { class: "c-success" }, "已参加");
                } else if (record.participationStatus === 2) {
                    return h(
                        "span",
                        {
                            class: "c-danger",
                            style: "cursor: pointer;",
                            on: {
                                click: () => {
                                    this.showRefuseInfo(record);
                                },
                            },
                        },
                        "已拒绝"
                    );
                } else {
                    return h("span", {}, "未确认");
                }
            },
        },
    ];
    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        this.$emit("modalOk");
    }

    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.formData.beginTime = arr[0];
        this.formData.endTime = arr[1];
    }
    showInfoCause = "";
    infoVisible = false;
    showRefuseInfo(item) {
        this.infoVisible = true;
        this.showInfoCause = item.refuseCause;
    }
    async clickPass() {
        this.$confirm({
            title: "确定要通过吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                const res = await marketApi.activityAudit({
                    id: this.formData.id,
                    auditStatus: 1,
                    rejectReason: "",
                });
                this.$message.success(res.msg);
                this.closeModal();
                this.$emit("resetList");
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    refuseVisible = false;
    rejectCause = "";
    refuseLoading = false;
    clickRefuse() {
        this.refuseVisible = true;
    }
    async refuseOk() {
        this.refuseLoading=true
        const res = await marketApi.activityAudit({
            id: this.formData.id,
            auditStatus: 2,
            rejectReason: this.rejectCause,
        });
        this.refuseLoading=false
        this.refuseVisible=false
        this.$message.success(res.msg);
        this.closeModal();
        this.$emit("resetList");
    }
}
</script>
<style lang="scss">
.agency-detail-modal {
    .form-panel-box {
        margin-bottom: 10px;
        border-radius: 10px;
    }
}
</style>
